<template>
  <div class="_wrap">
    <div class="_top">
      <div class="item">
        <subTit title="完成投资总金额"/>
        <div class="__num">
          <img src="@/assets/imgSchoolHouse/icon1.svg">
          <count-to class="val" :start-val="0" :end-val="totalAmount" :decimals="2" :duration="3600" /><span class="unit">万元</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="item">
        <subTit title="新增土地总面积"/>
        <div class="__num">
          <img src="@/assets/imgSchoolHouse/icon2.svg">
          <count-to class="val" :start-val="0" :end-val="totalArea" :duration="3600" /><span class="unit">m²</span>
        </div>
      </div>
    </div>
    <div class="divider"></div>
    <div class="chartBox">
      <eChart :option="option"></eChart>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import countTo from 'vue-count-to'
  import subTit from '../components/subTit'
  export default {
    name: 'itemLeftTop',
    components: { countTo, subTit },
    data() {
      return {
        totalAmount: 116523.59,
        totalArea: 149281,
        option: {}
      }
    },
    mounted() {
      let obj = {
        xAxisData: ['2019年', '2020年', '2021年', '2022年', '2023年'],
        seriesData: [
          {
            name: '本年完成投资',
            data: [
              { value: 28233.03, unit: '万元' },
              { value: 29847.756, unit: '万元' },
              { value: 26077.5168, unit: '万元' },
              { value: 25404.5568, unit: '万元' },
              { value: 27965.6616, unit: '万元' },
            ]
          },
          {
            name: '本年计划投资',
            data: [
              { value: 115365.63, unit: '万元' },
              { value: 124365.65, unit: '万元' },
              { value: 108656.32, unit: '万元' },
              { value: 105852.32, unit: '万元' },
              { value: 116523.59, unit: '万元' },
            ]
          },
          {
            name: '施工建筑面积',
            data: [
              { value: 179172.42, unit: '㎡' },
              { value: 171859.26, unit: '㎡' },
              { value: 177344.13, unit: '㎡' },
              { value: 173687.55, unit: '㎡' },
              { value: 182829, unit: '㎡' },
            ],
            symbolSize: 0, showSymbol: false,
            lineStyle: {
              width: 0, // 线宽是0
              color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
            },
            emphasis: {
              scale: false
            }
          },
          {
            name: '新增土地面积',
            data: [
              { value: 141816.95, unit: '㎡' },
              { value: 143309.76, unit: '㎡' },
              { value: 147788.19, unit: '㎡' },
              { value: 137338.52, unit: '㎡' },
              { value: 149281, unit: '㎡' },
            ],
            symbolSize: 0, showSymbol: false,
            lineStyle: {
              width: 0, // 线宽是0
              color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
            },
            emphasis: {
              scale: false
            }
          },
          {
            name: '新增固定资产价值',
            data: [
              { value: 0, unit: '' },
              { value: 0, unit: '' },
              { value: 0, unit: '' },
              { value: 0, unit: '' },
              { value: 0, unit: '' },
            ],
            symbolSize: 0, showSymbol: false,
            lineStyle: {
              width: 0, // 线宽是0
              color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
            },
            emphasis: {
              scale: false
            }
          },
        ]
      }
      this.option = this.getOption(obj)
    },
    methods: {
      getOption({xAxisData, seriesData}){
        let yAxisMax = 0
        let arr = _.sortBy([...seriesData[0].data,...seriesData[1].data], [o => -o.value])
        let numArr = Math.trunc(arr[0].value).toString().split('')
        let res = []
        for(let i = 0; i < numArr.length; i++){
          let n = 0
          if(i<=1){
            n = Number(numArr[i])
          }
          res.push(n)
        }
        console.log( res, '---yAxisMax')
        return {
          color: ['#33EDFD', '#0776D1'],
          legend: {
            top: '10px',
            right: 0,
            data: ['本年完成投资', '本年计划投资'],
            icon: 'rect',
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            left: '5px',
            right: '10px',
            top: '50px',
            bottom: '20px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: (params) => {
              let html = ''
              for (let i = 0; i < params.length; i++) {
                const formatNum = (value) => {
                  if(!value&&value!==0) return 0;
                  let str = value.toString();
                  let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                  return str.replace(reg,"$1,");
                }
                let val = params[i].value ? params[i].value : 0
                let name = i===0 ? `<div>${params[i].name}</div>` : ''
                html += `
                  <div class="tooltip">
                    ${name}
                    <div class="item">
                        <div class="${i>1?'marker':''}">${params[i].marker}</div>${params[i].seriesName}<span>${formatNum(val)}</span>${params[i].data.unit}
                    </div>
                  </div>
                `
              }
              return html
            },
            textStyle: {
              // fontSize: 32,
              color: '#fff'
            },
            borderColor: 'rgba(0,161,255,0.42)', // transparent
            backgroundColor: ' rgba(1,33,59,0.65)', // transparent
            padding: [5, 10]
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: xAxisData,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255, .16)',
              }
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              color: 'rgba(255,255,255,0.8)'
            }
          },
          yAxis: [
            {
              name: '金额：万元',
              type: 'value',
              min: 0,
              max: 150000,
              // interval: 100,
              nameTextStyle: {
                align: 'center',
                fontSize: 16,
                color: '#fff'
              },
              axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                color: 'rgba(255,255,255,0.8)'
              },
              splitLine: {
                show: true, // 是否显示分隔线
                lineStyle: {
                  color: 'rgba(255,255,255,0.16)',
                  type: 'dashed',
                  width: 1
                }
              },
              axisLine: {
                show: false
              },
              splitArea: {
                show: false // 是否显示分隔区域
              }
            },
          ],
          series: seriesData.map(item => {
            return {
              ...item,
              type: 'line',
            }
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%; height: 100%;
    display: grid; grid-template-rows: 80px 4px auto; grid-gap: 24px;
    ._top {
      /*display: grid; grid-template-columns: 1fr 1fr;*/
      display: flex; justify-content: space-between;

      .item {
        width: 192px;
        .__num {
          display: flex; align-items: center; margin-top: 10px;
          img { width: 24px; height: 24px; margin-right: 10px; }
          .val { font-size: 24px; color: #00FFFA; letter-spacing: 1.44px; font-family: DINPro; margin-right: 6px; }
          .unit { font-size: 16px; font-family: PingFangSC; white-space: nowrap; }
        }
      }
      .line {
        width: 1px; height: 100%; background-image: linear-gradient(rgba(255,255,255,0.3) 3px, hsla(0, 0%, 100%, 0) 0);
        background-size: 1px 6px; background-repeat: repeat-y;
      }

    }
    .divider {
      width: 100%;
      background: url('~@/assets/imgSchoolHouse/divider_s.svg') no-repeat;
    }
  }
  ::v-deep .tooltip {
    .item {
      display: flex; align-items: center; color: rgba(255,255,255,.8);
      .marker { visibility:hidden }
      span { color: #00FFFA; font-family: DINPro; font-size: 16px; margin: 0 6px; }
    }
  }
</style>
